<template>
  <div id="orderList">
    <div class="orderTable">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="订单ID">
                <span>{{ props.row.order.id }}</span>
              </el-form-item>
              <el-form-item label="用户ID">
                <span>{{ props.row.order.uid }}</span>
              </el-form-item>
              <el-form-item label="电影ID">
                <span>{{ props.row.film.id }}</span>
              </el-form-item>
              <el-form-item label="场次ID">
                <span>{{ props.row.arrangement.id }}</span>
              </el-form-item>
              <el-form-item label="电影名">
                <span>{{ props.row.film.name }}</span>
              </el-form-item>
              <el-form-item label="座位号">
                <span>{{ props.row.order.seats }}</span>
              </el-form-item>
              <el-form-item label="订单金额">
                <span>{{ props.row.order.price }}</span>
              </el-form-item>
              <el-form-item label="下单时间">
                <span>{{ props.row.order.createAt }}</span>
              </el-form-item>
              <el-form-item label="支付时间">
                <span>{{ props.row.order.payAt }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="订单ID" width="330px" prop="order.id">
        </el-table-column>
        <el-table-column label="订单金额" width="100px" prop="order.price">
        </el-table-column>
        <el-table-column label="订单状态" width="150px">
          <template slot-scope="scope">
            <div v-if="scope.row.order.status == 0" class="tableStatusWait">
              <span>等待支付</span>
            </div>
            <div v-if="scope.row.order.status == 1" class="tableStatusFail">
              <span>支付失败</span>
            </div>
            <div v-if="scope.row.order.status == 2" class="tableStatusSuccess">
              <span>支付成功</span>
            </div>
            <div v-if="scope.row.order.status == 3" class="tableStatusCancel">
              <span>已被撤销</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="tableOpera">
              <div class="operaBtn">
                <el-button @click="revokeBtn(scope.$index)" type="warning"
                  >撤销订单</el-button
                >
                <el-button @click="reportBtn(scope.$index)" type="danger"
                  >上报危险</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 确认撤销 -->
      <div class="confirmRevoke">
        <el-dialog title="提示" :visible.sync="revokeVisible" width="500px">
          <span>是否撤销该订单</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="revokeVisible = false">取 消</el-button>
            <el-button type="primary" @click="orderRevoke()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 添加异常订单 -->
      <div class="addErr">
        <el-dialog
          title="上报异常订单"
          :visible.sync="ErrVisible"
          width="600px"
        >
          <div class="reportName">
            <span>上报人</span>
            <el-input
              placeholder="请输入内容"
              v-model="errForm.adminId"
              :disabled="true"
            >
            </el-input>
          </div>
          <div class="Reason">
            <span>上报原因</span>
            <el-input placeholder="请输入内容" v-model="errForm.reason">
            </el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="ErrVisible = false">取 消</el-button>
            <el-button type="primary" @click="reportErr()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrder, revokeOrder, exportErr } from "@/api/admin.js";
export default {
  name: "orderList",
  data() {
    return {
      tableData: [
        {
          order: {
            id: "",
            uid: "",
            phone: "",
            aid: "",
            seats: "",
            price: "",
            status: "",
            createAt: "",
            payAt: "",
          },
          user: {
            id: "",
          },
          film: {
            id: "",
            name: "",
          },
          arrangement: {
            id: "",
          },
        },
      ],
      index: 0,
      revokeVisible: false,
      ErrVisible: false,
      errForm: {
        adminId: "",
        oid: "",
        reason: "",
      },
    };
  },
  methods: {
    getAllOrder: function () {
      getOrder().then((res) => {
        this.tableData = res.data;
      });
    },
    // 点击撤销订单按钮
    revokeBtn: function (id) {
      this.index = id;
      if (this.tableData[this.index].order.status === 3) {
        this.$message({
          message: "该订单已被撤销",
          type: "warning",
        });
        return;
      }
      this.revokeVisible = true;
    },
    // 撤销订单
    orderRevoke: function () {
      revokeOrder(
        this.tableData[this.index].order.id,
        this.tableData[this.index].order.uid,
        this.tableData[this.index].order.phone,
        this.tableData[this.index].order.aid,
        this.tableData[this.index].order.seats,
        this.tableData[this.index].order.price,
        3,
        this.tableData[this.index].order.createAt,
        this.tableData[this.index].order.payAt
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.tableData[this.index].order.status = 3;
          this.revokeVisible = false;
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    // 点击上报按钮
    reportBtn: function (index) {
      this.ErrVisible = true;
      this.errForm.oid = this.tableData[index].order.id;
      this.errForm.reason = "";
    },
    // 上报异常
    reportErr: function () {
      exportErr(
        this.errForm.oid,
        this.errForm.reason,
        this.errForm.adminId
      ).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.ErrVisible = false;
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
  },
  mounted() {
    this.getAllOrder();
    this.errForm.adminId = localStorage.getItem("id");
  },
};
</script>

<style lang="less" scoped>
#orderList {
  .orderTable {
    margin: 20px 0 0 20px;
    .demo-table-expand {
      display: flex;
      flex-direction: column;
      font-size: 0;
      margin-left: 80px;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
    .tableStatusWait,
    .tableStatusFail,
    .tableStatusSuccess,
    .tableStatusCancel {
      width: 89px;
      height: 28px;
      border-radius: 5px;
      text-align: center;
      line-height: 28px;
    }
    .tableStatusCancel {
      background-color: rgba(255, 227, 191, 1);
      border: 1px rgba(244, 173, 0, 1) solid;
      color: #f4ad00;
    }
    .tableStatusSuccess {
      background-color: rgba(231, 254, 180, 1);
      border: 1px rgba(138, 197, 6, 1) solid;
      color: #8ac506;
    }
    .tableStatusWait {
      background-color: rgba(222, 245, 255, 1);
      border: 1px rgba(108, 152, 172, 1) solid;
      color: #6c98ac;
    }
    .tableStatusFail {
      background-color: orangered;
      border: 1px red solid;
      color: red;
    }
    .tableOpera {
      .operaBtn {
        display: flex;
        flex-direction: row;
        .el-button {
          margin-right: 10px;
        }
      }
    }
    .addErr {
      // 上报人
      .reportName,
      .Reason {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .el-input {
          width: 400px;
          margin-left: 10px;
        }
      }
      .reportName {
        .el-input {
          margin-left: 23px;
        }
      }
      // 上报原因
    }
  }
}
</style>